<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  <%@ include file="/WEB-INF/component/commonCSS.jsp" %>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    </style>
  </head>
  <body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
    <section class="content-header">
    	<h1>预约</h1>
		<ol class="breadcrumb">
			<li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i>首页</a></li>
			<li class="active"><a href="#">预约</a></li>
			<li class="active"><a href="#">预约时间</a></li>
		</ol>
		
	</section>
        <section class="content">
         <div class=" box box-success">
			<div class="box-body">
            <div class="col-md-6">
            <div><h4>选择日期</h4></div> 
                <div class="box-body no-padding">
                  <div id="calendar"></div>
                </div>
            </div>
          <div  style="position:absolute; margin-left: 600px;margin-top: 0px;">
          <div><h4 style="margin-left: 55px;margin-top: 12px;">选择时间</h4></div>
           <div class="col-md-8">
                <div class="box-body" style="margin-top: 50px;">
                  <div id="external-events">
                  <c:forEach items="${list}" var="map">
                    <div class="external-event bg-green" style="width: 200px;height: 35px;" id="${map.bidSubscribeDetailId }" onclick="getTime('${map.bidSubscribeDetailId }','${map.subscribeStarttimeStr}','${map.subscribeEndtimeStr }');">${map.subscribeStarttimeStr} - ${map.subscribeEndtimeStr }</div>
                  </c:forEach>
                  </div>
                  </div>
                </div>
               </div>
              <div class="box-footer text-center" style="margin-top: 520px;" >
                    <button type="button" onclick="save();" class="btn btn-success btn-sm">预&nbsp;&nbsp;约</button>
              </div>
              </div>
               </div>
        </section>
     
    <%@ include file="/WEB-INF/component/commonJS.jsp" %>
    
    <script type="text/javascript">
      $(function () {
        var date = new Date();
        var d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
        $('#calendar').fullCalendar({
          header: {
        	  left:"",
        	 right: 'prev,next',
            center: 'title'
          },
          editable: true,
          droppable: true, 
          drop: function (date, allDay) { 

            var originalEventObject = $(this).data('eventObject');
            
            var copiedEventObject = $.extend({}, originalEventObject);

            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;
            copiedEventObject.backgroundColor = $(this).css("background-color");
            copiedEventObject.borderColor = $(this).css("border-color");

           
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            if ($('#drop-remove').is(':checked')) {
              $(this).remove();
            }

          }
        });

        /* ADDING EVENTS */
        var currColor = "#3c8dbc"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > a").click(function (e) {
          e.preventDefault();
          //Save color
          currColor = $(this).css("color");
          //Add color effect to button
          $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
        });
        $("#add-new-event").click(function (e) {
          e.preventDefault();
          //Get value and make sure it is not null
          var val = $("#new-event").val();
          if (val.length == 0) {
            return;
          }

          //Create events
          var event = $("<div />");
          event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event");
          event.html(val);
          $('#external-events').prepend(event);

          //Add draggable funtionality
          ini_events(event);

          //Remove event from text input
          $("#new-event").val("");
        });
      });
      
      var strDate ="";
      var id = "";
      var startTime="";
      var endTime="";
      function getMyDay(dateStr){
    	  $("#"+dateStr+"").attr("class","myDate");
    	  strDate = dateStr;
    }
      function getTime(detailId,start,end){
    	  if(id != "" || id != detailId){
    		  $("#"+id+"").attr("class","external-event bg-green ui-draggable ui-draggable-handle");
    	  } 
    	  $("#"+detailId+"").attr("class","external-event bg-red ui-draggable ui-draggable-handle");
    	  id = detailId;
    	  startTime=start;
    	  endTime=end;
    }
      function save(){
    	  if(!validate()){
    		  return;
    	  }
    	  $.ajax({
				type : "POST",
				url : "${ctx}/bidSubscribeDetail/saveBidSubscribeDetail.html",
				data : "subscribeDate="
						+ strDate
						+ "&subscribeStarttime="+startTime
						+ "&subscribeEndtime="+endTime
						+ "&bidSubscribeId=${bidSubscribeId}",
				dataType:"json",
				success : function(result) {
					if(result.success){
						$.HN.message.alert('操作成功！','信息', 'success');
						window.location.href="${ctx}/bidSubscribeRecord/toSuccessJsp.html";
					}else{
						$.HN.message.alert('操作失败！','信息', 'error');
					}
				}
			});
      }
      
      function validate(){
			if (strDate == null || strDate == "") {
				$.HN.message.alert("请选择预约的日期！", "消息", "warn");
				return false;
			} 
			if (id == null || id == "") {
				$.HN.message.alert("请选择预约的时间！", "消息", "warn");
				return false;
			} 
			return true;
		}
    </script>
  </body>
</html>
